<template>
  <view class="content">
    <view class="custom-header">
      <view class="left"> 短剧平台名称 </view>
      <view class="right">
        <view
          @click="linkTo"
          data-link="/pages/client/vipcard/index"
          class="action-icon"
        >
          <image
            src="/static/img/index/member.png"
            style="width: 50rpx; height: 50rpx"
          ></image>
        </view>

        <view @click="linkTo" data-link="/pages/client/zui" class="action-icon">
          <image
            src="/static/img/index/gift.png"
            style="width: 50rpx; height: 50rpx"
          ></image>
        </view>
      </view>
    </view>

    <!-- 大标题 -->
    <view v-if="selecttype == 0" class="big-title"> 搜索你喜欢的短剧 </view>

    <view v-if="selecttype == 0" class="search-container">
      <view class="search-box">
        <view class="search-input-wrapper">
          <text class="iconfont iconsousuo search-icon"></text>
          <input
            class="search-input"
            v-model="searchKeyword"
            :placeholder="$t('index.searchPlaceholder')"
            placeholder-style="color: #888;"
            @confirm="handleSearch"
            @input="onSearchInput"
          />
          <text v-if="searchKeyword" @click="clearSearch" class="clear-icon"
            >×</text
          >
        </view>

        <!-- 搜索结果下拉列表 -->
        <view
          v-if="showSearchResults && searchResults.length > 0"
          class="search-dropdown"
        >
          <view
            v-for="(item, index) in searchResults"
            :key="index"
            class="search-result-item"
            @click="selectSearchResult(item)"
          >
            <image
              class="search-result-img"
              :src="item.img"
              mode="aspectFill"
            ></image>
            <view class="search-result-info">
              <text class="search-result-title">{{ item.name }}</text>
              <text class="search-result-desc" v-if="item.summary">{{
                item.summary
              }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <sub-tabvs
      v-if="false"
      class="custom-tabs"
      :tabs="translatedTabs"
      @change="changeIndex"
      :selectIndex="selecttype"
    ></sub-tabvs>

    <!-- 新的tabs -->
    <view class="features">
      <view
        class="feature-card"
		:class="type === value.id ? 'feature-card-active' : ''"
        v-for="(value, key) in translatedTabs"
        :key="key"
		@click="changeIndex(key)"
      >
        <view v-if="key === 0" class="feature-icon">🎬</view>
        <view v-if="key === 1" class="feature-icon">📝</view>
        <view v-if="key === 2" class="feature-icon">🖼️</view>
        <view class="feature-title">{{ value.name }}</view>
      </view>
    </view>

    <view v-if="selecttype == 1">
      <home-jqjs :datasa="listjq"></home-jqjs>
    </view>

    <view
      v-if="selecttype == 2"
      class="flex space pd10_15"
      style="display: flex; flex-wrap: wrap"
    >
      <block v-for="(value, key) in listbz" :key="key">
        <view class="wallpaper-item">
          <image
            class="wallpaper-img"
            mode="aspectFill"
            :src="value.img"
          ></image>
        </view>
      </block>
    </view>
    <view v-if="selecttype == 0">
      <view class="home-header pd0_15 mt10">
        <view
          class="home-mendian flex alcenter space plr15 cl-w9"
          style="display: none"
        >
          <navigator
            style="width: calc(100% - 80rpx)"
            url="/pages/client/tuan/ss"
          >
            <view class="flex alcenter" style="width: calc(100% - 80rpx)">
              <text class="iconfont iconsousuo ft14 mr10"></text>
              <text class="text-over ft14" style="width: calc(100% - 60rpx)"
                >请输入搜索内容</text
              >
            </view>
          </navigator>
          <!-- <text @click="saoma()" class="iconfont iconicon_saoma ft24"></text> -->
        </view>

        <view class="">
          <home-banner :banners="banners"></home-banner>
        </view>
      </view>

      <view class="integral-mall-main plr15" style="margin-top: 30upx">
        <view class="mt24" v-if="hotdata[1]">
          <view class="section-header flex alcenter space">
            <view class="flex alcenter">
              <image
                style="width: 40rpx; height: 40rpx"
                :src="statics.zhuico[0]"
              ></image>
              <text class="ft16 ftw600 cl-main ml15">本周热门</text>
            </view>
            <navigator url="/pages/client/tuan/ss?selectIndex=1">
              <view @click="huanyihuan()" class="ft14 cl-notice">换一换</view>
            </navigator>
          </view>

          <view class="mt16 flex space">
            <block
              v-for="(value, key) in hotdata"
              :key="key"
              v-if="key >= hyh && key < hyh + 3"
            >
              <view class="drama-card" @click="detail(value.id, 0)">
                <view class="hot-tag">热门</view>
                <image
                  class="drama-img"
                  mode="aspectFill"
                  :src="value.img"
                ></image>
                <view class="drama-title">{{ value.name }}</view>
              </view>
            </block>
          </view>
        </view>
        <view class="mt24" v-if="givedata[3]">
          <view class="section-header flex alcenter space">
            <view class="flex alcenter">
              <image
                style="width: 40rpx; height: 40rpx"
                :src="statics.zhuico[2]"
              ></image>
              <text class="ft16 ftw600 cl-main ml15">排行榜</text>
            </view>
            <navigator url="/pages/client/tuan/ss?selectIndex=3">
              <view class="ft14 cl-notice">每周热剧TOP3</view>
            </navigator>
          </view>
          <view class="mt16 flex space">
            <block v-for="(value, key) in givedata" :key="key" v-if="key < 3">
              <view class="top-drama-card" @click="detail(value.id, 0)">
                <view class="top-tag">热剧</view>
                <image
                  class="top-drama-img"
                  mode="aspectFill"
                  :src="value.img"
                ></image>
                <view class="drama-title">{{ value.name }}</view>
              </view>
            </block>
          </view>
        </view>
      </view>
      <home-default :datasa="datasa"></home-default>
    </view>
  </view>
</template>

<script>
import { languageMixin } from "@/common/mixins.js";

export default {
  mixins: [languageMixin],
  data() {
    return {
      hyh: 0,
      datasa: [],
      listjq: [],
      listbz: [],
      showdyxx: true,
      dataconfig: [],
      banners: [],
      datainfo: [],
      dataindex: [],
      hotdata: [],
      givedata: [],
      statics: {
        zhuico: [
          "/static/img/index/icon1.png",
          "/static/img/index/icon2.png",
          "/static/img/index/icon3.png",
          "/static/img/index/icon4.png",
          "/static/img/index/icon5.png",
          "/static/img/index/icon6.png",
          "/static/img/index/icon7.png",
        ],
      },
      typetab: [
        { name: "推荐短剧", id: 1, key: "recommendDrama" },
        { name: "剧情介绍", id: 2, key: "plotIntroduction" },
        { name: "剧情壁纸", id: 3, key: "plotWallpaper" },
      ],
      selecttype: 0,
      type: 1,

      searchKeyword: "",
      searchResults: [],
      showSearchResults: false,
      searchDebounceTimer: null,
    };
  },
  computed: {
    // 获取翻译后的tab名称
    translatedTabs() {
      return this.typetab.map((tab) => ({
        ...tab,
        name: this.$t(`index.${tab.key}`), // 直接设置name属性为翻译后的文本
      }));
    },
  },

  onShareAppMessage(e) {},
  onShareTimeline(e) {},
  onLoad(e) {
    // uni.setStorage({//缓存配置信息
    // 	key: 'webUrl',
    // 	data: this.configs.webUrl
    // })
    //this.getList();
  },
  onShow() {
    this.getList();
    // this.getList(1);
    // this.getList(2);
    // this.getList(3);
    let this_ = this;
  },
  methods: {
    changeIndex(index) {
      if (this.typetab[index].id) {
        this.type = this.typetab[index].id;
        //this.getList(0)
      }
      console.log(this.type);
      this.selecttype = index;
    },
    huanyihuan() {
      if (this.hyh < 12) {
        this.hyh = this.hyh + 3;
      }
      if (this.hyh >= 12) {
        this.hyh = 0;
      }
    },
    getList() {
      let this_ = this;
      let data = {};
      uni.request({
        url: this.configs.webUrl + "/api/video/indexdata",
        data: data,
        success: (data) => {
          //console.log(data.data)
          uni.setStorage({
            //缓存配置信息
            key: "config",
            data: data.data.config,
          });
          this.banners = data.data.config.banner;

          this.listbz = data.data.listbz;
          this.listjq = data.data.listjq;
          this.datasa = data.data.new;
          this.hotdata = data.data.hotdata;
          this.givedata = data.data.givedata;
        },
        fail: (data, code) => {},
      });
    },
    saoma() {
      //#ifdef APP-PLUS
      uni.scanCode({
        success: function (res) {
          if (res.result.indexOf("uid") != -1) {
            var obj = JSON.parse(res.result);
            if (obj.uid) {
              uni.navigateTo({
                url: "/pages/login/reg?uid=" + obj.uid,
              });
            }
          } else {
            uni.showToast({ title: res.result, icon: "none" });
          }
        },
      });
      //#endif
    },
    detail(vid, mid) {
      var fxpid = 1;
      if (uni.getStorageSync("userinfo")) {
        fxpid = uni.getStorageSync("userinfo").id;
      }
      uni.navigateTo({
        url:
          "/pages/client/tuan/detail?vid=" +
          vid +
          "&mid=" +
          mid +
          "&fxpid=" +
          fxpid,
      });
    },
    linkTo(e) {
      if (this.isLogin == false) {
        this.showLogin = true;
      } else {
        let link = e.currentTarget.dataset.link;
        uni.navigateTo({
          url: link,
        });
      }
    },

    exchange(e) {
      if (this.isLogin == false) {
        this.showLogin = true;
      } else {
        let id = e.currentTarget.dataset.id;
        uni.navigateTo({
          url: "/pages/client/integral/exchange?id=" + id,
        });
      }
    },
    handleSearch() {
      if (this.searchKeyword) {
        uni.navigateTo({
          url: `/pages/client/tuan/ss?keyword=${this.searchKeyword}`,
        });
      } else {
        uni.showToast({
          title: this.$t("index.enterKeyword"),
          icon: "none",
        });
      }
    },
    onSearchInput(e) {
      this.searchKeyword = e.detail.value;
      // 实时搜索，防抖处理
      if (this.searchDebounceTimer) {
        clearTimeout(this.searchDebounceTimer);
      }

      if (this.searchKeyword.trim()) {
        this.searchDebounceTimer = setTimeout(() => {
          this.performSearch(this.searchKeyword.trim());
        }, 500); // 500ms 防抖
      } else {
        // 清空搜索结果
        this.searchResults = [];
        this.showSearchResults = false;
      }
    },
    clearSearch() {
      this.searchKeyword = "";
      this.searchResults = [];
      this.showSearchResults = false;
      if (this.searchDebounceTimer) {
        clearTimeout(this.searchDebounceTimer);
      }
    },
    performSearch(keyword) {
      // 直接调用搜索接口
      uni.request({
        url: this.configs.webUrl + "/api/video/lists",
        data: {
          keytext: keyword,
          limit: 5, // 限制搜索结果数量，避免加载过多
        },
        success: (response) => {
          if (response.data && response.data.rows) {
            this.searchResults = response.data.rows;
            this.showSearchResults = true;
          } else {
            this.searchResults = [];
            this.showSearchResults = false;
          }
        },
        fail: (error) => {
          console.error("搜索失败:", error);
          uni.showToast({
            title: this.$t("common.networkError"),
            icon: "none",
          });
        },
      });
    },
    selectSearchResult(item) {
      // 选择搜索结果，跳转到详情页
      this.showSearchResults = false;
      this.searchKeyword = item.name;
      var fxpid = 1;
      if (uni.getStorageSync("userinfo")) {
        fxpid = uni.getStorageSync("userinfo").id;
      }
      uni.navigateTo({
        url:
          "/pages/client/tuan/detail?vid=" + item.id + "&mid=0&fxpid=" + fxpid,
      });
    },
  },
};
</script>

<style>
/* 基础样式 */
page {
  background: transparent;
  height: 100%;
}

/* 主要内容容器 */
.content {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  min-height: 100vh;
  color: #fff;
  padding: 30rpx 0 160rpx; /* 增加底部内边距 */
  box-sizing: border-box;
  position: relative;
}

/* 搜索区域 */
.search-container {
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  gap: 20rpx;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: blur(10px);
}

.search-box {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50rpx;
  padding: 10rpx 20rpx;
  position: relative;
  border: 1px solid rgba(255, 214, 0, 0.2);
}

.search-input-wrapper {
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 10rpx 15rpx;
  font-size: 28rpx;
  color: #fff;
  background: transparent;
  border: none;
}

.search-icon {
  color: #ffd600;
  font-size: 36rpx;
  margin-right: 10rpx;
}

.clear-icon {
  color: #888;
  font-size: 40rpx;
  padding: 0 10rpx;
}

.action-icon {
  background: rgba(255, 214, 0, 0.1);
  border-radius: 50%;
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 214, 0, 0.3);
}

/* 标签栏 */
.custom-tabs {
  border-radius: 50rpx;
  margin: 20rpx 30rpx;
  padding: 10rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 90rpx;
  z-index: 99;
}

/* 壁纸页面 */
.wallpaper-item {
  width: 48%;
  margin: 1%;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
  margin-bottom: 30rpx;
}

.wallpaper-item:active {
  transform: scale(0.98);
}

.wallpaper-img {
  width: 100%;
  height: 500rpx;
  display: block;
}

/* 短剧卡片 */
.drama-card {
  width: 31%;
  position: relative;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 40rpx;
  background: #1e1e1e;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
}

.drama-card:active {
  transform: translateY(5rpx);
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.2);
}

.drama-img {
  width: 100%;
  height: 280rpx;
  display: block;
}

.drama-title {
  padding: 20rpx 15rpx;
  font-size: 26rpx;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hot-tag,
.top-tag {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background: linear-gradient(135deg, #ffd600 0%, #ff8c00 100%);
  color: #000;
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  z-index: 2;
  font-weight: bold;
}

/* 顶部短剧卡片 */
.top-drama-card {
  width: 31%;
  position: relative;
  border-radius: 20rpx;
  overflow: hidden;
  background: #1e1e1e;
  box-shadow: 0 10rpx 30rpx rgba(255, 214, 0, 0.1);
  border: 1px solid rgba(255, 214, 0, 0.2);
  margin-bottom: 40rpx;
}

.top-drama-img {
  width: 100%;
  height: 280rpx;
  display: block;
}

/* 搜索下拉列表 */
.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #2a2a2a;
  border-radius: 0 0 20rpx 20rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.5);
  z-index: 1000;
  max-height: 500rpx;
  overflow-y: auto;
  border: 1px solid rgba(255, 214, 0, 0.2);
  border-top: none;
}

.search-result-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #333;
  align-items: center;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
  background: #333;
}

.search-result-info {
  flex: 1;
}

.search-result-title {
  font-size: 28rpx;
  color: #ffd600;
  margin-bottom: 5rpx;
  display: block;
}

.search-result-desc {
  font-size: 24rpx;
  color: #aaa;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 首页头部 */
.home-header {
  background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
  border-radius: 0 0 40rpx 40rpx;
  padding-bottom: 30rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
  margin-bottom: 20rpx;
}

/* 全局文字颜色 */
.cl-main,
.cl-notice,
.cl-w9 {
  color: #fff !important;
}

/* 区块标题 */
.section-header {
  padding: 20rpx 0;
  border-bottom: 1px solid rgba(255, 214, 0, 0.2);
  margin-bottom: 20rpx;
}

/* 功能图标 */
.ft14,
.ft16,
.ft24 {
  color: #fff !important;
}

/* 文本溢出 */
.text-over {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 布局工具类 */
.flex {
  display: flex;
}

.alcenter {
  align-items: center;
}

.space {
  justify-content: space-between;
}

.mt10 {
  margin-top: 10rpx;
}

.mt16 {
  margin-top: 16rpx;
}

.mt24 {
  margin-top: 24rpx;
}

.ml15 {
  margin-left: 15rpx;
}

.pd0_15 {
  padding: 0 15rpx;
}

.pd10_15 {
  padding: 10rpx 15rpx;
}

.plr15 {
  padding-left: 15rpx;
  padding-right: 15rpx;
}

.plr10 {
  padding-left: 10rpx;
  padding-right: 10rpx;
}

.ftw400 {
  font-weight: 400;
}

.ftw600 {
  font-weight: 600;
}

.text-center {
  text-align: center;
}

/* 底部安全区域 */
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 响应式布局 */
@media (max-width: 750rpx) {
  .drama-card,
  .top-drama-card {
    width: 48%;
  }

  .content {
    padding-bottom: 140rpx;
  }
}

/* 样式重置 */

/* 新头部 */
.content {
  padding: 0 0 160rpx; /* 增加底部内边距 */
}

.custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(10px);
  padding: 24rpx;
  position: sticky;
  top: 0;
  z-index: 110;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-header .left {
  font-size: 48rpx;
  font-weight: 700;
  background: linear-gradient(90deg, #d4af37, #ffdb70);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.custom-header .right {
  display: flex;
  gap: 24rpx;
}

.big-title {
  font-weight: 700;
  font-size: 80rpx;
  margin-top: 80rpx;
  margin-bottom: 30rpx;
  text-align: center;
  background: linear-gradient(90deg, #d4af37, #ffdb70);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.search-container {
  position: relative;
}

.custom-tabs {
  /* position: relative;
		top: 0; */
  background: transparent;
}

/* 搜索下拉列表 */
.search-dropdown {
  background: rgba(0, 0, 0, 0.8);
}

.features {
  display: flex;
  justify-content: center;
  gap: 24rpx;
  margin-top: 24rpx;
  margin-bottom: 24rpx;
  padding: 0 24rpx;
}

.feature-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32rpx;
  padding: 12rpx;
  text-align: center;
  flex: 1;
  max-width: 250px;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.feature-card-active,
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border-color: rgba(212, 175, 55, 0.3);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 15px;
  color: #d4af37;
}

.feature-title {
  font-size: 26rpx;
  margin-bottom: 10px;
  color: #e2e8f0;
}

/* 短剧卡片 */
.drama-card {
  background: transparent;
  box-shadow: none;
}

/* 顶部短剧卡片 */
.top-drama-card {
  background: transparent;
  box-shadow: none;
  border: none;
}

.cl-notice{
	background: rgba(212, 175, 55, 0.2);
    color: #d4af37;
    border: none;
    padding: 16rpx 32rpx;
    border-radius: 40rpx;
    cursor: pointer;
    font-size: 28rpx;
    transition: background 0.3s;
}
</style>
